@import 'car-font';
@import 'race';
@import 'countdown';
@import 'zen';

.racer {
  &__race {
    grid-area: race;
  }

  display: grid;
  grid-row-gap: $block-gap;
  grid-column-gap: $block-gap;
  grid-template-areas: 'board' 'race' 'side';

  @include breakpoint($mq-col2) {
    grid-template-columns: $col2-uniboard-width $col2-uniboard-table;
    grid-template-rows: auto fit-content(0);
    grid-template-areas:
      'board side'
      'race  race';
  }

  &__started {
    @extend %flex-column;

    justify-content: stretch;
    text-align: center;

    i {
      font-size: 15em;
      line-height: 1.2em;
    }

    p {
      margin: 3em 0;
    }
  }

  .button-navaway,
  .puz-side__join .button {
    display: block;
    width: 100%;
    margin-top: 2em;
  }

  .puz-side__top::before {
    background-image: img-url('racer/checkered-flag.svg');
  }

  .puz-side__link > div {
    display: flex;
    input {
      flex: 1 1 auto;
    }
  }

  .puz-side__start {
    margin-top: 1em;
  }

  .puz-clock {
    flex-flow: row wrap;
    justify-content: space-between;
  }

  &__skip {
    @extend %flex-column;
    align-items: center;
    @include transition;
    outline: none;
    &.disabled {
      opacity: 0;
      cursor: default;
    }
    &::before {
      content: '';
      background-image: img-url('racer/gear-stick.svg');
      width: 4ch;
      height: 4ch;
      margin-bottom: 0.6ch;
    }
    &:hover::before {
      transform: scaleX(-1);
    }
  }
  &--pre .racer__skip {
    cursor: not-allowed;
  }

  &__spectating .puz-clock__time {
    font-size: 3em;
  }

  &__pre__message {
    &--with-skip {
      @extend %flex-center-nowrap;
      justify-content: space-between;
    }
    &__pov {
      color: $c-brag;
      margin: 1em 0;
      @include breakpoint($mq-col2) {
        margin: 1em 0 0 0;
      }
    }
  }

  &__rematch {
    white-space: normal;
  }

  &__post__next {
    &__new {
      margin: 2em 0 1em 0;
    }
    &__button {
      width: 100%;
    }
  }
}
